<template>
  <div class="echarts-outer-wrapper">
    <Title
      title="月申报情况统计"
      time="2"
      timePosition="left"
      dw="单位：户次"
    ></Title>
    <div class="flex-wrapper" v-if="EchartData">
      <div class="echart-wrapper">
        <div class="sub-title">增值税</div>
        <div class="detail">
          <div class="left">
            <div class="item-wrapper">
              <img src="~@/assets/images/menu-5.png" alt class="item-left" />
              <div class="item-right">
                <div class="item border">
                  <img class="icon" src="~@/assets/images/menu-3.png" alt />
                  <div class="text">
                    <div class="num">
                      {{ EchartData.zzs_ysb_bq | formateMoney }}
                    </div>
                  </div>
                </div>
                <div class="item">
                  <img class="icon" src="~@/assets/images/menu-4.png" alt />
                  <div class="text">
                    <div class="num">
                      {{ EchartData.zzs_ysb_tq | formateMoney }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item-wrapper">
              <img src="~@/assets/images/menu-6.png" alt class="item-left" />
              <div class="item-right">
                <div class="item border">
                  <img class="icon" src="~@/assets/images/menu-3.png" alt />
                  <div class="text">
                    <div class="num">
                      {{ EchartData.zzs_wsb_bq | formateMoney }}
                    </div>
                  </div>
                </div>
                <div class="item">
                  <img class="icon" src="~@/assets/images/menu-4.png" alt />
                  <div class="text">
                    <div class="num">
                      {{ EchartData.zzs_wsb_tq | formateMoney }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <echartCompt class="echart" v-model="option1"></echartCompt>
          <!-- <div ref="echart2" class="echart"></div> -->
        </div>
      </div>
      <div class="echart-wrapper">
        <div class="sub-title">企业所得税</div>
        <div class="detail">
          <div class="left">
            <div class="item-wrapper">
              <img src="~@/assets/images/menu-5.png" alt class="item-left" />
              <div class="item-right">
                <div class="item border">
                  <img class="icon" src="~@/assets/images/menu-3.png" alt />
                  <div class="text">
                    <div class="num">
                      {{ EchartData.qysds_ysb_bq | formateMoney }}
                    </div>
                  </div>
                </div>
                <div class="item">
                  <img class="icon" src="~@/assets/images/menu-4.png" alt />
                  <div class="text">
                    <div class="num">
                      {{ EchartData.qysds_ysb_tq | formateMoney }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item-wrapper">
              <img src="~@/assets/images/menu-6.png" alt class="item-left" />
              <div class="item-right">
                <div class="item border">
                  <img class="icon" src="~@/assets/images/menu-3.png" alt />
                  <div class="text">
                    <div class="num">
                      {{ EchartData.qysds_wsb_bq | formateMoney }}
                    </div>
                  </div>
                </div>
                <div class="item">
                  <img class="icon" src="~@/assets/images/menu-4.png" alt />
                  <div class="text">
                    <div class="num">
                      {{ EchartData.qysds_wsb_tq | formateMoney }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <echartCompt class="echart" v-model="option2"></echartCompt>
          <!-- <div ref="echart3" class="echart"></div> -->
        </div>
      </div>
      <div class="echart-wrapper">
        <div class="sub-title">其他税费种</div>
        <div class="detail">
          <div class="left">
            <div class="item-wrapper">
              <img src="~@/assets/images/menu-5.png" alt class="item-left" />
              <div class="item-right">
                <div class="item border">
                  <img class="icon" src="~@/assets/images/menu-3.png" alt />
                  <div class="text">
                    <div class="num">
                      {{ EchartData.qtsfz_ysb_bq | formateMoney }}
                    </div>
                  </div>
                </div>
                <div class="item">
                  <img class="icon" src="~@/assets/images/menu-4.png" alt />
                  <div class="text">
                    <div class="num">
                      {{ EchartData.qtsfz_ysb_tq | formateMoney }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item-wrapper">
              <img src="~@/assets/images/menu-6.png" alt class="item-left" />
              <div class="item-right">
                <div class="item border">
                  <img class="icon" src="~@/assets/images/menu-3.png" alt />
                  <div class="text">
                    <div class="num">
                      {{ EchartData.qtsfz_wsb_bq | formateMoney }}
                    </div>
                  </div>
                </div>
                <div class="item">
                  <img class="icon" src="~@/assets/images/menu-4.png" alt />
                  <div class="text">
                    <div class="num">
                      {{ EchartData.qtsfz_wsb_tq | formateMoney }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <echartCompt class="echart" v-model="option3"></echartCompt>
          <!-- <div ref="echart4" class="echart"></div> -->
        </div>
      </div>
      <div class="echart-wrapper">
        <div class="sub-title">个人所得税</div>
        <div class="detail">
          <div class="image" @click="nav"></div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import Title from "@/components/title";

export default {
  name: "ysbqktj",
  components: {
    Title,
  },
  data() {
    return {
      prevDate: null,
      // 图表数据
      EchartData: null,
      option1: {},
      option2: {},
      option3: {},
    };
  },
  computed: {},
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  mounted() {
    this.ajax({
      url: "/dpzsSbcxService/ysbqktjQuery",
      method: "post",
      data: {
        param: {
          tjny: this.prevDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.EchartData = res.data;
      this.$nextTick(() => {
        this.zzsOption();
        this.qysdsOption();
        this.qtsfzOption();
      });
    });
  },
  methods: {
    option() {
      let _this = this;
      let opt = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },

        series: [
          {
            type: "gauge",
            radius: "100%",
            startAngle: "225",
            endAngle: "-45",
            pointer: {
              show: false,
            },
            detail: {
              formatter: function (value) {
                var num = value;
                return "{bule|" + num + "}{white|%}" + "{size|" + "}";
              },
              rich: {
                bule: {
                  fontSize: 30,
                  fontFamily: "DINBold",
                  color: "#fff",
                  fontWeight: "700",
                  padding: [-0, 0, 0, 0],
                },
                white: {
                  fontSize: 26,
                  color: "#fff",
                  fontWeight: "500",
                  padding: [-6, 0, 0, 0],
                },

                radius: {
                  width: 350,
                  height: 80,
                  // lineHeight:80,
                  borderWidth: 1,
                  borderColor: "#0092F2",
                  fontSize: 50,
                  color: "#fff",
                  backgroundColor: "#1B215B",
                  borderRadius: 20,
                  textAlign: "center",
                },
                size: {
                  height: 400,
                  padding: [100, 0, 0, 0],
                },
              },
              offsetCenter: ["0%", "0%"],
            },
            data: [],
            title: {
              show: true,
              textStyle: {
                color: "#ffffff",
                fontSize: 24,
              },
              padding: [200, 0, 0, 0],
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: [
                  [
                    // dataArr.value / 100,
                    1,
                    new _this.echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "rgb(247,109,55)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgb(253,191,76)", // 100% 处的颜色
                      },
                    ]),
                  ],
                  [1, "#2C6CC9"],
                ],
                width: 12,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                opacity: 1,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },

          {
            name: "白色圈刻度",
            type: "gauge",
            radius: "75%",
            startAngle: 225, //刻度起始
            endAngle: -45, //刻度结束
            splitNumber: 4, //刻度数量
            z: 4,
            axisTick: {
              show: true,
              lineStyle: {
                color: "#a1d5d9",
                width: 2,
              },
              length: 8,
              splitNumber: 12,
            },
            splitLine: {
              length: -4, //刻度节点线长度
              lineStyle: {
                width: 2,
                color: "#a1d5d9",
              }, //刻度节点线
            },
            axisLabel: {
              color: "rgba(255,255,255,0)",
              fontSize: 66,
            }, //刻度节点文字颜色
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                opacity: 0,
              },
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 0,
                name: "",
              },
            ],
          },
        ],
      };
      return opt;
    },
    zzsOption() {
      this.option1 = this.option();
      this.option1.series[0].data = [
        {
          value: this.EchartData.zzs_sbl,
          name: "申报率",
        },
      ];
    },
    qysdsOption() {
      this.option2 = this.option();
      this.option2.series[0].data = [
        {
          value: this.EchartData.qysds_sbl,
          name: "申报率",
        },
      ];
    },
    qtsfzOption() {
      this.option3 = this.option();
      this.option3.series[0].data = [
        {
          value: this.EchartData.qtsfz_sbl,
          name: "申报率",
        },
      ];
    },
    /* initEchart() {
      let echartObj2 = echarts.init(this.$refs.echart2);
      let echartObj3 = echarts.init(this.$refs.echart3);
      let echartObj4 = echarts.init(this.$refs.echart4);

      let option = (dataArr) => {
        return {
          tooltip: {
            formatter: "{a} <br/>{b} : {c}%",
          },

          series: [
            {
              type: "gauge",
              radius: "100%",
              startAngle: "225",
              endAngle: "-45",
              pointer: {
                show: false,
              },
              detail: {
                formatter: function (value) {
                  var num = value;
                  return "{bule|" + num + "}{white|%}" + "{size|" + "}";
                },
                rich: {
                  bule: {
                    fontSize: 30,
                    fontFamily: "DINBold",
                    color: "#fff",
                    fontWeight: "700",
                    padding: [-0, 0, 0, 0],
                  },
                  white: {
                    fontSize: 26,
                    color: "#fff",
                    fontWeight: "500",
                    padding: [-6, 0, 0, 0],
                  },

                  radius: {
                    width: 350,
                    height: 80,
                    // lineHeight:80,
                    borderWidth: 1,
                    borderColor: "#0092F2",
                    fontSize: 50,
                    color: "#fff",
                    backgroundColor: "#1B215B",
                    borderRadius: 20,
                    textAlign: "center",
                  },
                  size: {
                    height: 400,
                    padding: [100, 0, 0, 0],
                  },
                },
                offsetCenter: ["0%", "0%"],
              },
              data: [dataArr],
              title: {
                show: true,
                textStyle: {
                  color: "#ffffff",
                  fontSize: 24,
                },
                padding: [200, 0, 0, 0],
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: [
                    [
                      dataArr.value / 100,
                      new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                          offset: 0,
                          color: "rgb(247,109,55)", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "rgb(253,191,76)", // 100% 处的颜色
                        },
                      ]),
                    ],
                    [1, "#2C6CC9"],
                  ],
                  width: 12,
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  opacity: 1,
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
            },

            {
              name: "白色圈刻度",
              type: "gauge",
              radius: "75%",
              startAngle: 225, //刻度起始
              endAngle: -45, //刻度结束
              splitNumber: 4, //刻度数量
              z: 4,
              axisTick: {
                show: true,
                lineStyle: {
                  color: "#a1d5d9",
                  width: 2,
                },
                length: 8,
                splitNumber: 12,
              },
              splitLine: {
                length: -4, //刻度节点线长度
                lineStyle: {
                  width: 2,
                  color: "#a1d5d9",
                }, //刻度节点线
              },
              axisLabel: {
                color: "rgba(255,255,255,0)",
                fontSize: 66,
              }, //刻度节点文字颜色
              pointer: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  opacity: 0,
                },
              },
              detail: {
                show: false,
              },
              data: [
                {
                  value: 0,
                  name: "",
                },
              ],
            },
          ],
        };
      };
      echartObj2.setOption(
        option({
          value: this.EchartData.zzs_sbl,
          name: "申报率",
        })
      );
      echartObj3.setOption(
        option({
          value: this.EchartData.qysds_sbl,
          name: "申报率",
        })
      );
      echartObj4.setOption(
        option({
          value: this.EchartData.qtsfz_sbl,
          name: "申报率",
        })
      );
    }, */
    nav() {
      window.open("http://etax.bjsw.tax.cn/login.html", "_blank");
      // window.location.href = "http://etax.bjsw.tax.cn/login.html";
    },
  },
};
</script>
  
  <style scoped lang="scss">
.echarts-outer-wrapper {
  position: relative;
  width: 1862px;
  height: 314px;
}
.flex-wrapper {
  display: flex;
}
.echart-wrapper {
  flex: 0 0 25%;
  width: 25%;
  height: 256px;
  background-image: url(~@/assets/images/echart-bg-410.png);
  background-size: 100% 134px;
  background-repeat: no-repeat;
  background-position: center bottom;
  .sub-title {
    margin: 6px 0 12px 0;
    padding-left: 18px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
    color: #ffffff;
    background-image: url(~@/assets/images/bg-sub-title.png);
    background-size: 231px 12px;
    background-repeat: no-repeat;
    background-position: left bottom;
  }
  .detail {
    display: flex;
    padding: 0 24px;
    .image {
      margin-top: -32px;
      width: 400px;
      height: 216px;
      background-image: url(~@/assets/images/bg-image.png);
      background-size: 100% 100%;
      cursor: pointer;
    }
    .left {
      flex: 1;

      .left-title {
        margin-bottom: 26px;
        padding-left: 16px;
        height: 26px;
        line-height: 26px;
        border-left: 4px solid #a1d3f3;
        font-size: 24px;
        color: #a1d3f3;
      }
      .item-wrapper {
        display: flex;
        padding-left: 10px;
        margin: 4px 0;

        .item-left {
          flex: 0 0 36px;
          width: 30px;
          height: 88px;
          margin-right: 4px;
        }
        .item-right {
        }
      }
      .border::after {
        content: " ";
        position: absolute;
        width: 100%;
        bottom: 0;
        border-bottom: 1px solid #acd6ff30;
      }
      .item {
        position: relative;
        padding: 4px 0;
        display: flex;
        align-items: center;

        .icon {
          margin-right: 10px;
          width: 38px;
          height: 38px;
        }
        .text {
          flex: 1;
          position: relative;
          height: 26px;
          display: flex;
          align-items: flex-end;
          &.border::after {
            content: " ";
            position: absolute;
            width: 100%;
            bottom: -10px;
            border-bottom: 1px solid #acd6ff30;
          }
          .name {
            margin-right: 10px;
            font-size: 18px;
            line-height: 22px;
            color: #ffffff;
          }
          .num {
            flex: 1;
            color: #acd6ff;
            font-size: 24px;
            line-height: 24px;
          }
        }
      }
    }
    .echart {
      flex: 0 0 180px;
      width: 150px;
      height: 180px;
    }
  }
}
</style>
  